<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <treeToolsVue :node-data="company" :is-full="isFull" @add="showDig" />
        <hr>
        <!-- 树状图 -->
        <el-tree :data="departs" :default-expand-all="true" :expand-on-click-node="false">
          <!-- 靠作用域插槽传值遍历 -->
          <template #default="{ data }">
            <treeToolsVue
              :node-data="data"
              :is-root="false"
              @removed="remove"
              @add="showDig"
              @editDepts="editDepts"
            />
          </template>
        </el-tree>
      </el-card>
    </div>
    <!-- sync修饰，可以省略父组件的监听和方法 -->
    <addDeptVue
      :dialog-show.sync="dialogShow"
      :children="children"
      :departs="departs"
      :detail="detail"
      :title="title"
      @sumbitForm="addDepartments"
    />
  </div>
</template>

<script>
import treeToolsVue from './components/tree-tools.vue'
import { getDeparments, getDelDeparments, addDepartments, getDepartDetail, updateDepartments } from '@/api/departments'
import addDeptVue from './components/add-dept.vue'
import { Message } from 'element-ui'
export default {
  components: {
    treeToolsVue,
    addDeptVue
  },
  data() {
    return {
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人'
      },
      departs: [],
      isFull: true,
      dialogShow: false,
      children: [],
      ID: '',
      detail: {},
      title: ''
    }
  },
  created() {
    this.getDeparments()
  },
  methods: {
    async getDeparments() {
      const res = await getDeparments()
      // console.log(res)
      this.departs = this.listParts(res.depts, '')
      // 当点击公司最顶级添加部门的时候，应该让其id等于第一级的pid为空
      this.company = { name: res.companyName, manager: '负责人', id: '' }
    //   console.time('测试时间')
    //   for (let i = 0; i < 10; i++) {
    //     this.listParts(res.depts, '')
    //   }
    //   console.timeEnd('测试时间')
    },
    /** *
     *
     *  将列表型的数据转化成树形数据 => 递归算法 => 自身调用自身 => 一定条件不能一样， 否则就会死循环
     *  遍历树形 有一个重点 要先找一个头儿
     * ***/
    // 🔔 算法一: 递归
    // 一开始先将第一级的空pid选出
    listParts(list, tolpid) {
      const arr = []
      list.forEach((item) => {
        // 找到pid为''的第一级
        if (item.pid === tolpid) {
          // 找到之后 就要去找 item 下面有没有子节点
          // 再次调用自己 将id跟pid匹配 相同则追加进数组
          item.children = this.listParts(list, item.id)
          arr.push(item)
        }
      })
      return arr

      // 🔔 算法二: 非递归
      // list.forEach(item => {
      //   // 取出不为空的二级子元素
      //   if (item.pid !== tolpid) {
      //     // 得到一级元素id跟二级子元素相等的对象
      //     const parent = list.find(obj => obj.id === item.pid)
      //     if (parent) {
      //       // console.log(list)
      //       // 判断有没有parent.children
      //       parent.children = parent.children || []
      //       parent.children.push(item)
      //       // console.log(list)
      //     }
      //   }
      // })
      // // console.log(list)
      // return list.filter(val => val.pid === tolpid)
    },
    // 删除部门
    remove(id) {
      // console.log(this.departs)
      this.$confirm('确定要删除部门吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await getDelDeparments(id)
        this.$message({
          type: 'success',
          message: '删除部门成功!'
        })
        this.getDeparments()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      // const ind = this.departs.findIndex(item => item.id === id)
      // this.departs.splice(ind, 1)
    },
    // 新增部门
    showDig(item) {
      // console.log(item)
      this.dialogShow = true
      this.children = item.children
      this.ID = item.id
      this.title = '新增部门'
    },
    // 提交
    async addDepartments(data, bl) {
      if (bl) {
        // console.log(data)
        // 要分清楚现在是编辑还是新增
        if (data.id) {
          // 编辑模式  调用编辑接口
          await updateDepartments(data)
          Message.success('编辑成功')
        } else {
          // 新增部门
          await addDepartments({ ...data, pid: this.ID })
          Message.success('新增成功')
        }
        this.dialogShow = false
        // 刷新列表
        this.getDeparments()
      }
    },
    // 编辑部门
    async editDepts(data) {
      this.dialogShow = true
      this.children = data.children
      const res = await getDepartDetail(data.id)
      console.log(res)
      this.detail = res
      this.title = '编辑部门'
    }
    // 关闭弹窗
    // close() {
    //   this.dialogShow = false
    // }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
